<!--旅游电子合同代签委托书-->
<template>
  <div class="mainDiv">
    <div class="no-print">
      <el-button
        type="primary"
        icon="el-icon-printer"
        size="small"
        class="button-74"
        @click="printContent"
      >
        打印
      </el-button>
      授权代表：
      <el-select
        v-model="qsPerson"
        value-key="id"
        placeholder="代签人员"
        clearable
        class="no-print"
        style="width: 240px"
      >
        <el-option
          v-for="(item,index) in qsPersonList"
          :key="index"
          :value="item"
          :label="item.cutmName"
        >
        </el-option>
      </el-select>
    </div>
    <div v-for="(personList,k) in form.personList2">
        <br>
        <div class="centerText" style="font-size: 30px;font-weight: bold">旅游电子合同代签委托书</div>
        <br>
        <div >重庆九州国际旅行社有限公司</div>
      <div class="firstTwo">
        因本人个人原因，无法签订旅游电子旅游合同，本人在合同签订前已经了解本次出行时间景点费用包含等旅游服务内容，
      包括旅行社特别提示、出行风险告知的内容，本人身体健康适合出行旅游，特此委托
        姓名<span class="underline">{{qsPerson.cutmName}}</span>
        身份证号<span class="underline">{{qsPerson.certiCode}}</span>
        手机号码<span class="underline">{{qsPerson.mobileTelNum}}</span>
        作为本次
        <span class="underline">{{form.saleOrder!=null?form.saleOrder.productName:""}}</span>
        旅游的签约代表，代表本委托书旅游者与
      旅行社签订旅游电子合同和收取旅游团款。
        <span style="font-weight: bold">对被委托人在办理上述事项过程中所签署的相关文件，我均已认可，并承担相应的责任。
        此书面委托书，作为旅游合同附件留档。合同编号：
          <span style="color:red">{{form.contractDto!=null?form.contractDto.ycContract:""}}</span>
          （<span style="color:red">{{form.contractDto!=null?form.contractDto.contractId:""}}</span>）
        </span>
      </div>
      委托人确认签字：
        <br>
        <br>
        <br>
        <table>
          <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>身份证</td>
            <td>签字</td>
          </tr>
          <tr  v-for="(item,index) in personList" :key="index">
            <td>{{index+1}}</td>
            <td>{{item.cutmName}}</td>
            <td>{{item.certiCode}}</td>
            <td></td>
          </tr>
        </table>
      <div class="PageNext"></div>
    </div>

  </div>
</template>

<script>
import {
  getAllInfo,
} from "@/api/salepurchase/contract"
export default {
  name: 'dqwts',
  created() {
    const id = this.$route.query.id;
    this.id=id;
    this.getAllInfoIndex();
    var date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1); // 月份是从0开始的，所以要加1，并且需要补0
    const day = String(date.getDate()); // 日期补0
    this.year=year;
    this.month=month;
    this.day=day;
  },
  data(){
    return {
      id: '',
      year:"",
      month:"",
      day:"",
      qsPerson:{
      },
      personList:[

      ],
      qsPersonList:[

      ],
      form: {

      },
    }
  },
  methods: {
    getAllInfoIndex(){
      getAllInfo(this.id).then(response => {
          this.form = response.data
        //计算回来的时间
        const leaveDt=this.form.saleOrder.leaveDt;
        const travelDay=this.form.saleOrder.travelDay;
        const backDate=this.addDaysToDate(leaveDt,travelDay)
        this.form.saleOrder.backDate=backDate

        //遍历需要签署的人
        this.form.personList.forEach(e=>{
          e.forEach(p=>{
            if (p.isNeedSign===1){
              this.qsPersonList.push(p);
            }
          })

        })
        //默认选中需要签署的人
        if (this.qsPersonList.length>0){
          this.qsPerson=this.qsPersonList[0];
        }
        }
      )
    },
    /*查询信息*/
    printContent() {
      window.print();
    },
    addDaysToDate(date, days) {
      days=days-1
      const result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
    }
  }
}
</script>

<style scoped>
.no-print {
  margin-top: 5px;
}
/*首行缩进2字符*/
.firstTwo {
  text-indent: 2em;
}
.centerText{
  text-align: center;
}
.mainDiv{
  letter-spacing: 2px;
  font-size: 17px;
  line-height: 27px;
}
table{
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse;
}
table tr{
  border: 1px solid black;
}
table tr td{
  border: 1px solid black;
}
.rigntDate{
  text-align: right;
  padding-right:100px;
}
.underline{
  padding-left:5px;
  padding-right:5px;
  text-decoration: underline;
}
@media print {
  .no-print {
    display: none; /* 隐藏不需要打印的内容 */
  }
  .PageNext{page-break-after: always;}
}
</style>
